<?php

use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $model common\models\Share */
$this->title = '马拉松PB兔战绩测评';
?>
<section class="page-section page-share page-share-white active">

    <!-- title -->
    <h2 class="page-name">马拉松PB战绩</h2>

    <!-- level -->
    <h3 class="page-level" style="color: red;">
        <?php
            if ($model->getStars() === 1) {
                echo '酱油兔';
            } elseif ($model->getStars() === 2) {
                echo '小白兔';
            } elseif ($model->getStars() === 3) {
                echo '长腿兔';
            } elseif ($model->getStars() === 4) {
                echo '黄金兔';
            } elseif ($model->getStars() === 5) {
                echo '王者兔';
            }
        ?>
    </h3>

    <!-- info -->
    <div class="page-level-user">
        <label for="" style="color: #0f0f0f;"><?= $model->name ?></label>
        <div class="page-level-star" style="color:red;">
            <?php
            for($i=0; $i < $model->getStars(); $i++) {
                echo '<i></i>';
            }
            ?>
        </div>
    </div>

    <!-- level-info -->
    <div class="page-level-info">
        <div class="page-level-item page-level-row1">
            <small><?= $model->getOld() ?></small>
            <span>跑龄(年)</span>
        </div>
        <div class="page-level-item page-level-row1">
            <small><?= $model->num ?></small>
            <span>城市(个)</span>
        </div>
        <div class="page-level-item page-level-row3">
            <small><?= $model->getMileage() ?></small>
            <span>总赛事里程(Km)</span>
        </div>
        <div class="page-level-item page-level-row2">
            <small><?= $model->q_result ?></small>
            <span>全马PB</span>
        </div>
        <div class="page-level-item page-level-row2">
            <small><?= $model->ban_result ?></small>
            <span>半马PB</span>
        </div>
    </div>

    <!-- footer -->
    <div class="page-level-footer">
        <img src="img/ewcode.jpg" alt="">
        <div style="color: red">
            <h3>用脚步丈量世界</h3>
            <span style="color: black">跑友扫码测评</span>
        </div>
    </div>

    <!-- <div class="page-level-submit">
        <button type="button" class="page-button page-button-yellow" id="getResult">分享我的战绩</button>
    </div> -->

</section>

<div class="page-section page-result page-share-yellow hidden">
    <div class="page-pic"></div>
    <div class="page-btn">
        <i></i>
        <span>长按保存和分享战绩到朋友圈</span>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script>

    $(function() {
        $('.page-share').on('click', function(){
            html2canvas($(".page-share")[0], {scale:2,logging:false,useCORS:true}).then(function(canvas) {
                var dataUrl = canvas.toDataURL();
                $('.page-pic').append('<img src="'+dataUrl+'" height="100%" />');
                $('.page-share').removeClass('active').addClass('hidden');
                $('.page-result').removeClass('hidden').addClass('active')
            })
        })
    })

</script>
